<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: url(VisionsofGrandeur.jpg);
            overflow: hidden;
        }
        
        .box00 {
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5);
            animation-name: move1;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        
        @keyframes move1 {
            0% {}
            100% {
                transform: translateY(300px);
            }
        }
        
        @keyframes mymove {
            0% {}
            100% {
                transform: translate(300px, 100px);
            }
        }
        
        .boxmove {
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5);
            animation-name: mymove;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>


    <script>
        var box = document.querySelector('.box');
        //创建向下的雪花
        for (var i = 0; i <= 180; i++) {
            var div1 = document.createElement('div');
            div1.className = 'box00';
            box.appendChild(div1);
        }
        //创建左右的雪花
        for (var i = 0; i <= 30; i++) {
            var div1 = document.createElement('div');
            div1.className = 'boxmove';
            box.appendChild(div1);
        }
        // Math.ceil(Math.random()*10);
        //获取两种box
        var boxx = document.querySelectorAll('.box00');
        var boxx22 = document.querySelectorAll('.boxmove');
        for (var i = 0; i < boxx.length; i++) {
            boxx[i].style.width = Math.ceil(Math.random() * 10) + 'px';
            boxx[i].style.height = boxx[i].style.width;
            boxx[i].style.top = Math.ceil(Math.random() * 600) + 'px';
            boxx[i].style.left = Math.ceil(Math.random() * 1500) + 'px';
            boxx[i].style.opacity = Math.random();
        }
        // animation-delay: 0.2s;
        var sum = 0;
        for (var i = 0; i < boxx.length; i++) {
            sum += 10;
            boxx[i].style.animationDelay = sum + 'ms';
        }
        //boxmove添加属性

        for (var i = 0; i < boxx22.length; i++) {
            boxx22[i].style.width = Math.ceil(Math.random() * 10) + 'px';
            boxx22[i].style.height = boxx22[i].style.width;
            boxx22[i].style.top = Math.ceil(Math.random() * 600) + 'px';
            boxx22[i].style.left = Math.ceil(Math.random() * 1500) + 'px';
            boxx22[i].style.opacity = Math.random();
        }
        // animation-delay: 0.2s;
        var add = 0;
        for (var i = 0; i < boxx22.length; i++) {
            add += 10;
            boxx22[i].style.animationDelay = add + 'ms';
        }
    </script>
</body>

</html>